<template>
  <div class="home">
    <div class="header">
      <div class="search" @click="$router.push('/search')">
        <van-icon name="search" />
        <span>搜索</span>
      </div>
    </div>
    <div class="main">
      <van-tabs v-model="active" @click="switchTab" sticky>
        <van-tab :title="item.name" v-for="(item,index) in nav" :key="item._id">
        </van-tab>
      </van-tabs>


      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model="loading" :immediate-check="false" :finished="finished" finished-text="没有更多了" @load="getCate">
          <ul class="content">
            <li class="item" @click=" $router.push({ name: 'Detail', query: { _id: item._id } })" v-for="item in contentList" :key="item._id">
              <div class="top" :class="{imgOnec:item.poster_type==2,imgTwoc:item.poster_type==3}">
                <div class="title"><span>{{item.title}}</span></div>
                <div class="image" v-show="item.imageSrc.length!=0">
                  <img style="object-fit: contain;" @error="imgError"  v-for="img in item.imageSrc" :src="img | imgFilter" v-lazy="img " :key="img.id">
                </div>
              </div>
              <div class="footer">
                <span>作者:{{item.author}}</span>
                <em>时间:{{item.time|conversion}}</em>
                <em>评论数:{{item.comment}}</em>
                <van-icon name="cross" />
              </div>
            </li>
          </ul>
        </van-list>
      </van-pull-refresh>
    </div>


  </div>
</template>

<script>
import { Icon, Tab, Tabs, PullRefresh } from 'vant';
import { getCateList, getArticleLsit } from '@/API/home';
import { mapState } from 'vuex';
import config from '@/config/index';
export default {
  name: 'HomeView',
  data() {
    return {
      active: 0,
      nav: [],
      contentList: [],
      skip: 0,
      limit: 10,
      defaultImg: require("@/assets/2.jpg"),
      loading: false,
      finished: false,
      refreshing: false,

    }
  },
  created() {
    this.getList()
  },

  components: {
    [Icon.name]: Icon,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [PullRefresh.name]: PullRefresh,
  },
  computed: {
    cate_id() {
      // let active_cate = this.nav[this.active];
      // if (!active_cate) return ''
      // return active_cate._id;
      return this.nav[this.active]?._id
    },
    ...mapState('users',['uid'])
  },


  methods: {
    onRefresh() {
      this.contentList = []
      this.skip = 0
      this.finished = false;
      this.getCate(true)
    },

    // 获取分类
    getList() {
      getCateList().then(res => {
        if (res.code == 0) {
          this.nav = res.data

          this.getCate()
        }
      })
    },
    // 点击切换
    switchTab() {
      console.log('-----------------------------------------')
      this.contentList = []
      this.skip = 0
      this.loading = true
      this.finished = false;
      this.getCate()
    },
    //获取分类文章
    getCate(flag) {
      let { cate_id, skip, limit } = this
      console.log('--------------------7777777777777777777777---------------------')
      // 加个锁
      this.loading = true
      getArticleLsit({
        cate_id,
        skip, limit
      }).then(res => {
        if (flag) {
          this.refreshing = false
          this.contentList = res.data
          this.loading = true;
        } else {
          this.contentList.push(...res.data)
        }
        let len = this.contentList.length
        let count = res.count;
        if (len >= count) {
          this.finished = true;
        } else {
          this.loading = false;
          this.skip = len;
        }

      }).catch(err => {
    
      })
    },

    imgError() {
      let img = event.srcElement;
      img.src = this.defaultImg;
      img.onerror = null
    },
    

  },
  filters:{
    imgFilter(img){
      
      if (img.includes(config.baseImgUrl)||img.includes(config.baseImgUrls)) {
        return img+'?imageMogr2/thumbnail/!50p'
        
      }else{
        return img
      }
    }
  }

}
</script>
<style lang="less" scoped>
.home {
  width: 375px;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  height: 45px;
  padding: 7.5px 0;
  background-color: @baseColor;
  z-index: 999;

  .search {
    text-align: center;
    margin: 0 auto;
    width: 276px;
    height: 30px;
    line-height: 30px;
    border-radius: 18px;
    background-color: rgba(255, 255, 255, 0.5);
    color: #fff;

  }
}

::v-deep .van-pull-refresh__track {
  margin-top: 45px;
}

::v-deep .van-tabs__line {
  background-color:  @baseColor;
}

::v-deep .van-tabs {
  margin-top: 46.84px;
  margin-bottom: 50px;
}

::v-deep .van-tabs__wrap--scrollable .van-tab {
  background-color: #fff;
}

::v-deep .van-tabs--line .van-tabs__wrap {
  position: fixed;
  top: 45px;
  z-index: 999;
}

.main {
  // padding-top: 45px;
  // margin-top: 45px;
  padding-bottom: 100px;

  .content {
    padding: 0 15px;
    // padding-top: 45px;

    .item {
      padding: 7.5px 0;

      .title {
        line-height: 2;

        span {
          // display: inline-block;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          /* 这里是超出几行省略 */
          overflow: hidden;
        }
      }

      .imgOnec {
        img {
          width: 80px;
          height: 80px;
        }

        display: flex;
        justify-content: space-between;
        // align-items: center;
      }

      .imgTwoc {
        display: flex;
        flex-direction: column;

        .image {
          display: flex;
          justify-content: space-evenly;
          align-items: center;

          img {
            width: 80px;
            height: 80px;
          }
        }
      }

      .imgThreec {
        display: flex;
        flex-direction: column;

        .image {
          display: flex;
          justify-content: space-around;
          align-items: center;

          img {
            width: 80px;
            height: 80px;
          }
        }
      }

      .footer {
        color: #969799;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 2;

        span {
          // display: inline-block;
          width: 25%;
          overflow: hidden;
          /* 超出一行文字自动隐藏 */
          text-overflow: ellipsis;
          /*文字隐藏后添加省略号*/
          white-space: nowrap;
          /*强制不换行*/
        }
      }
    }
  }
}
</style>
